<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 20px;  /*图片与文字链接处间隙*/
				margin-bottom: 20px;  /*图片与文字链接处间隙*/
			}
			p{
				font-size: 16px; /*页面默认字体尺寸*/
				line-height: 25px;  /* 浮动文字，行高无法设定*/
				word-spacing: 7px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/2.png" alt="碧琪" width="300px" height="300px">
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia blanditiis at illum minima maxime! Repudiandae facere beatae quo quibusdam molestias veritatis exercitationem nam rem? Est neque eligendi commodi iure suscipit?  Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo totam recusandae ipsam ratione quo aut assumenda quos aliquam nobis nulla cupiditate rerum quaerat sequi est in obcaecati possimus, esse reprehenderit?      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolores iure expedita eaque modi, magni quas culpa quos adipisci, est eveniet minima unde, sapiente dolorum tenetur! Velit debitis quam quaerat?    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae a, veniam maxime nesciunt est temporibus hic quia id beatae dolore, voluptatum reiciendis labore ullam? Expedita facilis nemo molestiae alias eaque.</p>
	</body>
</html>